<template>
  <footer class="site-footer">
    <div class="footer-content">
      <div class="footer-section">
        <h3 class="footer-title">关于我们</h3>
        <p style="margin-right: 10px">
          职为你来是领先的招聘平台，致力于为求职者和企业提供优质的就业服务。
        </p>
      </div>
      <div class="footer-section">
        <h3 class="footer-title">快速链接</h3>
        <ul class="footer-links">
          <li><a href="/jobs">最新职位</a></li>
          <li><a href="/companies">热门公司</a></li>
          <li><a href="/career-advice">职业建议</a></li>
          <li><a href="/about-us">关于我们</a></li>
        </ul>
      </div>
      <div class="footer-section">
        <h3 class="footer-title">求职者</h3>
        <ul class="footer-links">
          <li><a href="/register">注册账号</a></li>
          <li><a href="/upload-resume">上传简历</a></li>
          <li><a href="/job-alerts">职位订阅</a></li>
          <li><a href="/saved-jobs">已保存职位</a></li>
        </ul>
      </div>
      <div class="footer-section">
        <h3 class="footer-title">雇主</h3>
        <ul class="footer-links">
          <li><a href="/post-job">发布职位</a></li>
          <li><a href="/search-resumes">搜索简历</a></li>
          <li><a href="/employer-branding">雇主品牌</a></li>
          <li><a href="/pricing">定价方案</a></li>
        </ul>
      </div>
      <div class="footer-section">
        <h3 class="footer-title">联系我们</h3>
        <p>电话：400-123-4567</p>
        <p>邮箱：support@zhiweinilay.com</p>
        <div class="social-links">
          <a href="#" aria-label="微信" class="social-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
              ></path>
              <line x1="22" y1="7" x2="2" y2="7"></line>
            </svg>
          </a>
          <a href="#" aria-label="微博" class="social-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
              ></path>
            </svg>
          </a>
          <a href="#" aria-label="领英" class="social-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
              ></path>
              <rect x="2" y="9" width="4" height="12"></rect>
              <circle cx="4" cy="4" r="2"></circle>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; 2024 职为你来招聘平台. 保留所有权利.</p>
      <ul class="footer-legal">
        <li><a href="/terms">使用条款</a></li>
        <li><a href="/privacy">隐私政策</a></li>
      </ul>
    </div>
  </footer>
</template>

<script setup>
// No additional script needed for this static footer
</script>

<style scoped>
.site-footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 20px 20px;
  font-family: Arial, sans-serif;
  margin-top: 10px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  margin-bottom: 10px;
}

.footer-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #3498db;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #ecf0f1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #3498db;
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.social-icon {
  color: #ecf0f1;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: #3498db;
}

.footer-bottom {
  max-width: 1200px;
  margin: 20px auto 0;
  padding-top: 20px;
  border-top: 1px solid #34495e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-legal {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: #3498db;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }

  .footer-section {
    margin-bottom: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    margin-top: 15px;
    justify-content: center;
  }
}
</style>
